<%@page import="bll.EnumName"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.*,util.*,dal.*,model.*, bll.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Bar Graph</title>
    <link rel="stylesheet" href="css/global.css" type="text/css"/>
    <link rel="stylesheet" href="css/chart.css" type="text/css"/>

    <script type="text/javascript" src="js/canvasXpress.min.js"></script>

    <script>

      var showDemo = function () {
         var cx = new CanvasXpress("canvas", {
          "x": {
            "Week": [
              "W1",
              "W2",
              "W3",
			  "W4"
            ]
          },
          "y": {
            "smps": [
              "W1",
              "W2",
              "W3",
			  "W4"
            ],
            "data": [
              [
                3,6,4,4
              ],
              [
                5,4,6,5
              ],
              [
                1,1,4,7
              ],
              [
                6,3,4,3
              ]
            ],
            "vars": [
              "Ân",
              "Thành",
              "Nhã",
              "Nam"
            ],
            "desc": ["days"]
          }
        }, {
          "graphType": "Bar",
          "graphOrientation": "vertical",
          "colorScheme": "basic",
          "title": "Employee Workload",
          "subtitle": "",
          "smpTitle": "",
          "smpLabelScaleFontFactor": 5,
          "background": "rgb(226,236,248)",
          "legendBackgroundColor": "rgb(226,236,248)",
          "smpLabelRotate": 90,
          "smpTitle": "Week",
          "smpTitleScaleFontFactor": 1.5,
          "smpHairlineColor": "rgb(200,200,200)",
          "xAxisTickColor": "rgb(200,200,200)",
          "gradient": true,
          "gradientType": "linear"
        });
      
      cx.groupSamples(["Week"]);
  }

    </script>

  </head>

  <body onload="showDemo();">

        <div class="content">

          <h1>Bar Graph</h1>

            <div>
              <br /><br />
             
              <canvas id="canvas" width="800" height="500"></canvas>
            </div>
            
        </div>
  </body>

</html>
